<!-- breatheLoading.vue -->
<template>
  <div class="circle-breath"></div>
</template>

<script>
  export default {
    data() {
      return {}
    }
  }
</script>

<style scoped lang="scss">
  .circle-breath {
    background: pink;
    box-shadow: 0 0 0 0 rgb(204, 73, 152);
    height: 36px;
    width: 36px;
    border-radius: 50%;
    animation: donghua 2.4s infinite;
  }

  @keyframes donghua {
    0% {
      transform: scale(0.6);
      /* 注意rgba中的a的设置 */
      box-shadow: 0 0 0 0 rgba(204, 73, 152, 60%);
    }

    60% {
      transform: scale(1);
      box-shadow: 0 0 0 36px rgba(204, 73, 152, 0%);
    }

    100% {
      transform: scale(0.6);
      box-shadow: 0 0 0 0 rgba(204, 73, 152, 0%);
    }
  }
</style>
